<template>
  <div :class="['base', 'position-x-center', 'font-color-white', 'font-size-sm', 'font-center', module[props.type]]">
    <p>{{ props.text }}</p>
  </div>
</template>

<script lang="ts" setup>
  import { useCssModule } from 'vue';
  import { MessagesType } from '@/common/type';
  import { HintCode } from "@/common/utils/enum.ts";

  const props = withDefaults(defineProps<MessagesType>(),{
    text: '',
    type: HintCode.SUCCESS,
  });

  // const title = {
  //   [HintCode.SUCCESS]: '成功',
  //   [HintCode.ERROR]: '错误',
  //   [HintCode.WARING]: '警告'
  // }

  const module = useCssModule('hint');

</script>

<style lang="scss" scoped>
  .base {
    position: fixed;
    height: 30Px;
    line-height: 30Px;
    top: 80Px;
    border-radius: 10Px;
    overflow: hidden;
  }
</style>
<style lang="scss" module="hint">
  @keyframes scaleWidth {
    0% {
      width: 0;
    }
    100% {
      width: 600Px;
    }
  }
  .success {
    background-color: $color-success;
    animation: scaleWidth .2s forwards;
  }
  .error {
    background-color: $color-error;
    animation: scaleWidth .2s forwards;
  }
  .waring {
    background-color: $color-warning;
    animation: scaleWidth .2s forwards;
  }
</style>
